<template>
 <div>
   <Input/>
    <div class="shop">
    <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
        <van-swipe-item
          ><img src="@/assets/lunbo/lunbo1.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="@/assets/lunbo/lunbo2.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="@/assets/lunbo/lunbo3.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="@/assets/lunbo/lunbo4.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="@/assets/lunbo/lunbo5.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="@/assets/lunbo/lunbo6.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="@/assets/lunbo/lunbo7.png" alt=""
        /></van-swipe-item>
      </van-swipe>
      <div class="lunbox"><img src="@/assets/lunbo/lunbox.png" alt=""></div>
      <div class="zuixinshangjia">
        <div class="zuixinshangjia_1">
          <div class="zuixinshangjia_1_1">最新上架</div>
          <div class="zuixinshangjia_1_2">全部</div>
          </div>
        <div class="zuixinshangjia_2">
          <div class="zuixinshangjia_2_center">
            <div class="zuixinshangjia_2_left">
              <div class="zuixinshangjia_left_1"><img src="@/assets/zhoubian/zhoubian1.png" alt=""></div>
            </div>
            <div class="zuixinshangjia_2_right">
              <div class="zuixinsile">
                <div class="zuixinshangjia_2_right_1"><img src="@/assets/zhoubian/zhoubian2.png" alt=""></div>
              <div class="zuixinshangjia_2_right_2"><img src="@/assets/zhoubian/zhoubian3.png" alt=""></div>
              </div>
            </div>
          </div>
        </div>
        <div><h3>推荐英雄</h3></div>
      <div class="xyx"> <img src="@/assets/zhoubian/zhoubian4.png" alt=""></div>
      <div class="xyx"> <img src="@/assets/zhoubian/zhoubian5.png" alt=""></div>
      <div class="xyx"> <img src="@/assets/zhoubian/zhoubian6.png" alt=""></div>
      <div class="xyx"> <img src="@/assets/zhoubian/zhoubian7.png" alt=""></div>
      <div class="xyx"> <img src="@/assets/zhoubian/zhoubian8.png" alt=""></div>
      <div class="xyx"> <img src="@/assets/zhoubian/zhoubian9.png" alt=""></div>
      <h3>周边商城</h3>
      <div class="xyx"> <img src="@/assets/zhoubian/zhoubian10.png" alt=""></div>
      <div class="xyx"> <img src="@/assets/zhoubian/zhoubian11.png" alt=""></div>
      </div>
      
  </div>
   <Foot/>
 </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.shop{
width: 100%;
 margin-top: 0.5rem;
  font-size: 0.15rem;
  font-size: 0.15rem;
  width: 100%;
  height: auto;
  overflow: auto;
  position: absolute;
  top: 0.5rem;
  bottom: .7rem;
  
}
.lunbo .my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
 .my-swipe img {
  width: 100%;
  height: 1.5rem;
}
.lunbox{
  width: 100%;
    height: 1rem;
}
.lunbox>img{
  width: 100%;
  height: 100%;
}
.zuixinshangjia{
  width: 100%;
  height: 3rem;
  /* background-color: #39a9ed; */
}
.zuixinshangjia_1{
width: 100%;
height: 10%;
/* background-color: aqua; */
display: flex;
justify-content: space-between;
}
.zuixinshangjia_2{
width: 100%;
height: 90%;
/* background-color: green; */
}
.zuixinshangjia_1_1{
  width: 80%;
font-size: .2rem;
color: black;
}
.zuixinshangjia_1_2{
  width: 20%;
  text-align: center;
  color: gray;

}
.zuixinshangjia_2_center{
  width: 90%;
  height: 80%;
  /* background-color: brown; */
  margin: auto;
  display: flex;
  justify-content: space-between;
  position: relative;
  top: 0.2rem;
}
.zuixinshangjia_2_left{
width: 60%;
height: 100%;
/* background-color: aqua; */
}
.zuixinshangjia_2_right{
width: 30%;
height: 100%;
/* background-color: chartreuse; */
}
.zuixinshangjia_left_1{
width: 100%;
height: 80%;
position: relative;
top: 0.2rem;
/* background-color: red; */
}
.zuixinshangjia_left_1>img{
  width: 100%;
  height: 100%;
  border-radius: 0.14rem;
}
.zuixinsile{
  /* background-color: chocolate ; */
  width: 100%;
  height: 80%;
  position: relative;
  top: 0.2rem;
}
.zuixinshangjia_2_right_1{
  width: 100%;
  height: 50%;
  
}
.zuixinshangjia_2_right_2{
  width: 100%;
  height: 50%;
  position: relative;
  top: 0.2rem;
}
.zuixinshangjia_2_right_1>img{
    width: 100%;
  height: 100%;
  border-radius: 0.14rem;
}
.zuixinshangjia_2_right_2>img{
    width: 100%;
  height: 100%;
  border-radius: 0.14rem;
}
.xyx{
  margin-left: 0.3rem;
  margin-top: 0.2rem;
  width: 80%;
  height: 1rem;
}
.xyx>img{
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
}
</style>